import { HIcon } from "@/components";
import { View, Text, ScrollView, Picker, Input } from "@tarojs/components";
import { FC } from "@tarojs/taro";
import classNames from "classnames";
import { AtDrawer, AtInput, AtButton } from "taro-ui";
import { AddressPicker, GenderPicker } from "@/components/picker";
import styles from "./index.module.less";
import Form, { Field } from "rc-field-form";
import useData, { IFormdata } from "./useData";

type FilterType = "gender" | "nativePlace" | "residence" | "more";
export interface IProps {
  /** 显示的筛选项 */
  showTabs?: FilterType[];
  onSearch: (params: IFormdata) => void;
}

const Category: FC<IProps> = (props) => {
  const { showTabs = ["gender", "nativePlace", "residence", "more"] } = props;
  const data = useData(props);

  return (
    <Form
      component="view"
      form={data.form}
      className={styles["category-wrapper"]}
    >
      <View className={classNames(styles["category-item"], styles["active"])}>
        <Text>最新</Text>
      </View>
      {showTabs?.indexOf("gender") !== -1 && (
        <View className={styles["category-item"]}>
          <Field
            name="gender"
            children={() =>
              data.form.getFieldValue("gender") ? (
                <View
                  className={classNames(
                    styles["category-item"],
                    styles["active"]
                  )}
                  onClick={() => data.onRemoveSearch("gender")}
                >
                  <Text>{data.form.getFieldValue("genderCn")}</Text>
                  <HIcon type="cuowu" color="#e7495d"></HIcon>
                </View>
              ) : (
                <GenderPicker
                  onConfirm={(e) => {
                    data.onSelectedLabel("gender", e.value, e.label);
                    data.onHandleSearch();
                  }}
                >
                  <Text>性别</Text>
                  <HIcon type="xiala" color="#999"></HIcon>
                </GenderPicker>
              )
            }
          ></Field>
        </View>
      )}

      {showTabs?.indexOf("nativePlace") !== -1 && (
        <View className={styles["category-item"]}>
          <Field
            name="nativePlace"
            children={() =>
              data.form.getFieldValue("nativePlace") ? (
                <View
                  className={classNames(
                    styles["category-item"],
                    styles["active"]
                  )}
                  onClick={() => data.onRemoveSearch("nativePlace")}
                >
                  <Text>{data.form.getFieldValue("nativePlaceCn")}</Text>
                  <HIcon type="cuowu" color="#e7495d"></HIcon>
                </View>
              ) : (
                <AddressPicker
                  onConfirm={(e) => {
                    data.onSelectedLabel("nativePlace", e[2].code, e[2].name);
                    data.onHandleSearch();
                  }}
                >
                  <Text>籍贯</Text>
                  <HIcon type="xiala" color="#999"></HIcon>
                </AddressPicker>
              )
            }
          ></Field>
        </View>
      )}

      {showTabs?.indexOf("residence") !== -1 && (
        <View className={styles["category-item"]}>
          <Field
            name="residence"
            children={() =>
              data.form.getFieldValue("residence") ? (
                <View
                  className={classNames(
                    styles["category-item"],
                    styles["active"]
                  )}
                  onClick={() => data.onRemoveSearch("residence")}
                >
                  <Text>{data.form.getFieldValue("residenceCn")}</Text>
                  <HIcon type="cuowu" color="#e7495d"></HIcon>
                </View>
              ) : (
                <AddressPicker
                  onConfirm={(e) => {
                    data.onSelectedLabel("residence", e[2].code, e[2].name);
                    data.onHandleSearch();
                  }}
                >
                  <Text>现居住地</Text>
                  <HIcon type="xiala" color="#999"></HIcon>
                </AddressPicker>
              )
            }
          ></Field>
        </View>
      )}

      {showTabs?.indexOf("more") !== -1 && (
        <View
          className={styles["category-item"]}
          onClick={() => data.setIsShowPopup(true)}
        >
          <Text>更多情况</Text>
          <HIcon type="xiala" color="#999"></HIcon>
        </View>
      )}

      {/* 更多情况筛选项 */}
      <AtDrawer
        show={data.isShowPopup}
        right
        width="74%"
        onClose={() => data.setIsShowPopup(false)}
      >
        <View className={styles["drawer-wrapper"]}>
          <ScrollView scrollY className={styles["drawer-content"]}>
            <View className={styles["item"]}>
              <View className={styles["title"]}>年龄</View>
              <View className={styles["content"]}>
                <Field name="minAge" trigger="onInput">
                  <Input className={styles["mini-input"]} type="number"></Input>
                </Field>
                <Text className={styles["space"]}>-</Text>
                <Field name="maxAge" trigger="onInput">
                  <Input className={styles["mini-input"]} type="number"></Input>
                </Field>
                <Text className={styles["space"]}>岁</Text>
              </View>
            </View>
            <View className={styles["item"]}>
              <View className={styles["title"]}>身高</View>
              <View className={styles["content"]}>
                <Field name="minHeight" trigger="onInput">
                  <Input className={styles["mini-input"]} type="number"></Input>
                </Field>
                <Text className={styles["space"]}>-</Text>
                <Field name="maxHeight" trigger="onInput">
                  <Input className={styles["mini-input"]} type="number"></Input>
                </Field>
                <Text className={styles["space"]}>cm</Text>
              </View>
            </View>
            <View className={styles["item"]}>
              <View className={styles["title"]}>体重</View>
              <View className={styles["content"]}>
                <Field name="minWeight" trigger="onInput">
                  <Input className={styles["mini-input"]} type="number"></Input>
                </Field>
                <Text className={styles["space"]}>-</Text>
                <Field name="maxWeight" trigger="onInput">
                  <Input className={styles["mini-input"]} type="number"></Input>
                </Field>
                <Text className={styles["space"]}>kg</Text>
              </View>
            </View>
            <View className={styles["item"]}>
              <View className={styles["title"]}>婚史</View>
              <Field
                name="marriageHistory"
                children={({ value }) => (
                  <View className={styles["content"]}>
                    <View className={styles["span-wrapper"]}>
                      {data.marriageHistoryData?.map((item) => (
                        <View
                          className={`${styles["span"]} ${
                            item.value === value && styles["active"]
                          }`}
                          key={item.value}
                          onClick={() =>
                            data.onSelectedLabel("marriageHistory", item.value)
                          }
                        >
                          {item.label}
                        </View>
                      ))}
                    </View>
                  </View>
                )}
              ></Field>
            </View>
            <View className={styles["item"]}>
              <View className={styles["title"]}>生肖</View>
              <Field
                name="chineseZodiac"
                children={({ value }) => (
                  <View className={styles["content"]}>
                    <View className={styles["span-wrapper"]}>
                      {data.chineseZodiacData?.map((item) => (
                        <View
                          className={`${styles["span"]} ${
                            item.value === value && styles["active"]
                          }`}
                          key={item.value}
                          onClick={() =>
                            data.onSelectedLabel("chineseZodiac", item.value)
                          }
                        >
                          {item.label}
                        </View>
                      ))}
                    </View>
                  </View>
                )}
              ></Field>
            </View>
            <View className={styles["item"]}>
              <View className={styles["title"]}>星座</View>
              <Field
                name="constellation"
                children={({ value }) => (
                  <View className={styles["content"]}>
                    <View className={styles["span-wrapper"]}>
                      {data.constellationData?.map((item) => (
                        <View
                          className={`${styles["span"]} ${
                            item.value === value && styles["active"]
                          }`}
                          key={item.value}
                          onClick={() =>
                            data.onSelectedLabel("constellation", item.value)
                          }
                        >
                          {item.label}
                        </View>
                      ))}
                    </View>
                  </View>
                )}
              ></Field>
            </View>
          </ScrollView>
          <View className={styles["bottom-btn"]}>
            <AtButton
              className={`${styles["btn"]} ${styles["no-bg"]}`}
              onClick={() => data.onResetSearch()}
            >
              重置
            </AtButton>
            <AtButton
              className={styles["btn"]}
              onClick={() => data.onHandleSearch()}
            >
              搜索
            </AtButton>
          </View>
        </View>
      </AtDrawer>
    </Form>
  );
};

export default Category;
